// 导航守卫
 import router from '@/router'
 import store from '@/store'

 import NProgress from 'nprogress' // 进度条
 import 'nprogress/nprogress.css'

 import {asyncRoutes} from '@/router' // 导入动态路由

 // 白名单数组
const whiteList = ['/login', '/404']
 router.beforeEach(async (to, from, next) => {  // 参数 to: 到哪去, from:从哪来, next:放行 next()
   NProgress.start() // 开始进度条
  const { token, userInfo } = store.state.user
  if(token) {  // 1.是否有token
    /*  获取用户信息
     1. 判断vuex中是否有用户信息
     2. 如果没有, 提交actions, 获取用户信息
     */
    if(!userInfo.userId) {
    await store.dispatch('user/getUserInfo')
    // 从vuex中获取store.state.user.userInfo.roles.menus信息
    const menus = store.state.user.userInfo.roles.menus
     // 动态的给路由添加规则
    const otherRoutes = asyncRoutes.filter(item=>{
      return menus.includes(item.children[0].name)
    })
    // console.log(otherRoutes)
    // 1.第一个404bug  解决 刷新后不要直接跳往404页面把404拼到动态的数组里面
    // 2.白屏bug 动态添加了路由，会直接访问白屏，因此需要重新访问一次路由才行
     router.addRoutes([...otherRoutes, { path: '*', redirect: '/404', hidden: true }])
     // 动态添加路由存储到vuex中,左侧菜单栏就会自动渲染
     store.commit('permission/setRoutes', otherRoutes)
     // 解决 重新访问路由,解决白屏问题
     next({...to, replace: true})
    }
    if(to.path === '/login') { // 2.有token
      next('/')
      NProgress.done()  // 结束进度条  2.1如果访问路径是登录页，跳转首页
    } else {
      next()                   // 2.2如果访问的是其他页面，允许正常访问
    }
  } else {                     // 3 没有token
    if(whiteList.includes(to.path)) { // 3.1 如果访问的是白名单，允许正常访问
      next()
    } else {
      next('/login')
      NProgress.done()             // 3.2 如果页面不在白名单，跳转登录页
    }
  }
 })
 // 后置导航守卫 跳转后 结束进度条
 router.afterEach((to, from)=>{
   NProgress.done()
 })
